<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本语法</title>
  <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="d1">
    <h1>{{msg}}--这里是插值表达式用法</h1>
    <h2 v-text="msg">相当于innerText</h2>
    <h3 v-html="msg">相当于innerHTML</h3>
    <input type="text" v-model:value="msg">
    <!--v-on:相当于@-->
    <input type="button" value="+" @click="add()">
    {{num}}
    <input type="button" value="-" v-on:click="minus()"> <br>

    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>

    你喜爱的语言是：<hr>
    {{language}}
  </div>
</body>
</html>

<script>
  let vs = new Vue({
    el:'#d1',
    data:{
      msg:'我是中国人',
      num:0,
      language:[]
    },
    created(){
      this.msg = "vue实例完成，<font color='red'>将来</font>访问后台在这里进行！"
      console.log(this)     // 此时的this代表vs实例
    },
    methods:{
      add(){
        this.num++;
      },
      minus(){
        this.num--;
        if(this.num < 0){
          this.num = 0;
        }
      }
    }
  })
</script>
